import BaseView from "../baseView.js";


let that = {}
export default class updataUers extends BaseView {
    constructor(id, userId) {
        super(id);
        this.usersId = userId;
        this.mouted();
        that = this;

    }
    mouted() {

        $.ajax({
            type: "get",
            url: "/userDatail/" + this.usersId,
            dataType: 'json',
            success: (data) => {
                console.log(data);
                let res = data.data;
                $('#student_name').val(res.name);
                $('#student_age').val();
                $('#demo1').attr('src', `../../images/${res.photo}`);

                //渲染页面
                // newform.render()
            }
        })
    }
    render() {
        $('#Content').html(`
        <div style="margin: 30px 10px 0 20px " id='nav'>
        <span class="layui-breadcrumb">
            <a>用户管理系统/</a>
            <a>用户资料管理/</a>
            <a>修改用户数据列表</a>
         </span>
         <hr/>
        </div>
        <h1 style="margin: 10px 10px 0 20px ">修改用户</h1>
        <hr/>
        <div style='width:300px;margin:auto'>
        <form class="layui-form" action="" lay-filter="formTest" >
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入用户账号" autocomplete="off"
                    class="layui-input" id="student_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="title" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                    class="layui-input" id="student_age" >
            </div>
        </div>

        <div class="layui-form-item" style='margin-left: 110px;'>
        <!-- 上传图片 -->
        <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list" style="width:100px;height:100px;border:1px #ccc solid">
          <img class="layui-upload-img" id="demo1"  style="width:100px;height:100px;">
          <p id="demoText"></p>
        </div>
        </div>  
        </div>  

        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='modifyButton' class="layui-btn" lay-submit lay-filter="formDemo">确定修改</button>
            <button type='button' id='backBtn' class="layui-btn" lay-submit lay-filter="formDemo">返回</button>
            </div>
        </div>


       
        </form>
        </div>
        `)
    }


    handle() {
        $("script[type='module']").append(`
        //获得表单
        var newform=null;
        <script>
        //Demo
        layui.use(['element','form'], function(){
            var form = layui.form,
            element = layui.element;
            //获取表单
            newform=form
            element.render('#nav')
            });
        </script>
        `)

        // 发送数据回后台
        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery,
                upload = layui.upload,
                element = layui.element,
                layer = layui.layer;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: '/modify' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    ,
                auto: false //不自动上传
                    ,
                bindAction: "#modifyButton" //绑定一个按钮来触发上传
                    // 传入的其他的参数（除了文件以后的参数）
                    ,
                data: {
                    _id: that.usersId,
                    // this.adminsId,
                    name: () => $("#student_name").val(),
                    pwd: () => $("#student_age").val(),
                },
                choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                },
                done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功的一些操作
                    else {
                        alert("上传成功");
                        window.location.hash = '#/main/UserInfo';
                        $('#demoText').html(''); //置空上传失败的状态

                    }
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });


        $('#backBtn').click(() => {
            window.location.hash = '#/main/UserInfo'
        })
        // $('#modifyButton').click(() => {
        //     $.ajax({
        //         type: 'put',
        //         url: '/modifyUser',
        //         data: {
        //             id: this.usersId,
        //             name: $('#student_name').val(),
        //             pwd: $('#student_age').val(),
        //         },
        //         dataType: 'json',
        //         success: (data) => {
        //             if (data.code == 1) {
        //                 alert(data.msg);
        //                 window.location.hash = '#/main/UserInfo'
        //             } else {
        //                 alert(data.msg);
        //             }
        //         }

        //     })
        // })
    }
}